<!doctype html>
<html lang="zh-CN">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="referrer" content="no-referrer-when-downgrade">
    

    <title>《Flutter插件awesome_dialog》 | 早起的年轻人</title>
    <meta property="og:title" content="《Flutter插件awesome_dialog》 - 早起的年轻人">
    <meta property="og:type" content="article">
        
    <meta property="article:published_time" content='2021-05-24T22:10:25&#43;08:00'>
        
        
    <meta property="article:modified_time" content='2021-05-24T22:10:25&#43;08:00'>
        
    <meta name="Keywords" content="Flutter，golang,go语言,go语言笔记,飞雪无情,java,android,博客,项目管理,python,软件架构,公众号,小程序">
    <meta name="description" content="《Flutter插件awesome_dialog》">
        
    <meta name="author" content="luckly">
    <meta property="og:url" content="https://luckly.work/post/Flutter%E6%8F%92%E4%BB%B6awesome_dialog/">
    <link rel="shortcut icon" href='/favicon.ico'  type="image/x-icon">

    <link rel="stylesheet" href='/css/normalize.css'>
    <link rel="stylesheet" href='/css/style.css'>
    <script type="text/javascript" src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    
    
    
        <link href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
    
    
    
    
        <link rel="stylesheet" href='/css/douban.css'>
    
        <link rel="stylesheet" href='/css/other.css'>
    
</head>

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<body>
    <header id="header" class="clearfix">
    <div class="container">
        <div class="col-group">
            <div class="site-name ">
                
                    <a id="logo" href="https://luckly.work/">
                        早起的年轻人
                    </a>
                
                <p class="description">专注于Flutter、Android、Java、Go语言(golang)、移动互联网、项目管理、软件架构</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    <a class="current" href="https://luckly.work/">首页</a>
                    
                    <a  href="https://luckly.work/categories/" title="分类">分类</a>
                    
                    <a  href="https://luckly.work/tags/" title="标签">标签</a>
                    
                    <a  href="https://luckly.work/about/" title="关于我">关于我</a>
                    
                    <a  href="https://github.com/ITmxs/" title="github">github</a>
                    
                </nav>
            </div>
        </div>
    </div>
</header>

    <div id="body">
        <div class="container">
            <div class="col-group">

                <div class="col-8" id="main">
                    
<div class="res-cons">
    <style type="text/css">
    .post-toc {
        position: fixed;
        width: 200px;
        margin-left: -210px;
        padding: 5px 10px;
        font-family: Athelas, STHeiti, Microsoft Yahei, serif;
        font-size: 12px;
        border: 1px solid rgba(0, 0, 0, .07);
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.98);
        background-clip: padding-box;
        -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .125);
        box-shadow: 1px 1px 2px rgba(0, 0, 0, .125);
        word-wrap: break-word;
        white-space: nowrap;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 999;
        cursor: pointer;
        max-height: 70%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .post-toc .post-toc-title {
        width: 100%;
        margin: 0 auto;
        font-size: 20px;
        font-weight: 400;
        text-transform: uppercase;
        text-align: center;
    }

    .post-toc .post-toc-content {
        font-size: 15px;
    }

    .post-toc .post-toc-content>nav>ul {
        margin: 10px 0;
    }

    .post-toc .post-toc-content ul {
        padding-left: 20px;
        list-style: square;
        margin: 0.5em;
        line-height: 1.8em;
    }

    .post-toc .post-toc-content ul ul {
        padding-left: 15px;
        display: none;
    }

    @media print,
    screen and (max-width:1057px) {
        .post-toc {
            display: none;
        }
    }
</style>
<div class="post-toc" style="position: absolute; top: 188px;">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
        <nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#使用">使用</a></li>
        <li><a href="#属性-">属性 ：</a></li>
        <li><a href="#例子">例子</a></li>
        <li><a href="#custom-body">Custom Body</a></li>
        <li><a href="#自定义按钮">自定义按钮</a></li>
      </ul>
    </li>
  </ul>
</nav>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var postToc = $(".post-toc");
        if (postToc.length) {
            var leftPos = $("#main").offset().left;
            if(leftPos<220){
                postToc.css({"width":leftPos-10,"margin-left":(0-leftPos)})
            }

            var t = postToc.offset().top - 20,
                a = {
                    start: {
                        position: "absolute",
                        top: t
                    },
                    process: {
                        position: "fixed",
                        top: 20
                    },
                };
            $(window).scroll(function () {
                var e = $(window).scrollTop();
                e < t ? postToc.css(a.start) : postToc.css(a.process)
            })
        }
    })
</script>
    <article class="post">
        <header>
            <h1 class="post-title">《Flutter插件awesome_dialog》</h1>
        </header>
        <date class="post-meta meta-date">
            2021年5月24日
        </date>
        
        <div class="post-meta">
            <span>|</span>
            
            <span class="meta-category"><a href='/categories/flutter'>flutter</a></span>
            
            <span class="meta-category"><a href='/categories/%E6%8F%92%E4%BB%B6'>插件</a></span>
            
        </div>
        
        
        <div class="post-meta">
            <span id="busuanzi_container_page_pv">|<span id="busuanzi_value_page_pv"></span><span>
                    阅读</span></span>
        </div>
        
        
        <div class="clear" style="display: none">
            <div class="toc-article">
                <div class="toc-title">文章目录</div>
            </div>
        </div>
        
        <div class="post-content">
            <blockquote>
<p>本文主要介绍一个新的Flutter软件包项目，用于简单而出色的对话框，我们在应用程序中使用它来向用户显示某些警告或确认，在这种情况下，我们可以通过使用一些属性在其中使用其他类型的动画。并可以设置颜色，文字等</p>
</blockquote>
<h3 id="使用">使用</h3>
<p><strong>步骤1：添加依赖项。</strong></p>
<blockquote>
<p>*<strong>将依赖项添加到pubspec-yaml文件。*</strong></p>
</blockquote>
<pre><code>dependencies:   
awesome_dialog: ^1.3.2
</code></pre><blockquote>
<p>*<strong>步骤2：导入软件包：*</strong></p>
</blockquote>
<pre><code>import 'package:awesome_dialog/awesome_dialog.dart';
</code></pre><blockquote>
<p>*<strong>步骤3：运行flutter包*</strong></p>
</blockquote>
<p><a href="https://github.com/marcos930807/awesomeDialogs/raw/master/doc/gif.gif">https://github.com/marcos930807/awesomeDialogs/raw/master/doc/gif.gif</a></p>
<h3 id="属性-">属性 ：</h3>
<blockquote>
<p>*<strong>以下是“awesome_dialog”对话框的基本属性。*</strong></p>
</blockquote>
<ul>
<li>**animType-**使用animType属性更改对话框的动画。</li>
<li><strong>dialogType</strong> — dialogType用于对话框类型属性，例如info，error等。</li>
<li><strong>title-</strong> title属性用于将对话框标题设置为对话框。</li>
<li><strong>desc</strong> — desc属性用于对话框说明。</li>
<li><strong>autoHide</strong> — autoHide属性会在一段时间后隐藏，可以将其时间设置为任何时间。</li>
</ul>
<h3 id="例子">例子</h3>
<pre><code>AwesomeDialog(
            context: context,
            dialogType: DialogType.INFO,
            animType: AnimType.BOTTOMSLIDE,
            title: 'Dialog Title',
            desc: 'Dialog description here.............',
            btnCancelOnPress: () {},
            btnOkOnPress: () {},
            )..show();
</code></pre><h3 id="custom-body">Custom Body</h3>
<p>如果指定了正文，则标题和描述将被忽略，这允许进一步自定义对话框。</p>
<pre><code>AwesomeDialog(
            context: context,
            animType: AnimType.SCALE,
            dialogType: DialogType.INFO,
            body: Center(child: Text(
                    'If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.',
                    style: TextStyle(fontStyle: FontStyle.italic),
                  ),),
            title: 'This is Ignored',
            desc:   'This is also Ignored',
            btnOkOnPress: () {},
                 )..show();
</code></pre><h3 id="自定义按钮">自定义按钮</h3>
<p>要使用自定义按钮，只需指定buttonOk或btnCancel小部件，所有文本参数图标等都将被忽略。</p>
<h4 id="demo">demo</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:awesome_dialog/awesome_dialog.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter/material.dart&#39;</span>;

<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;routes.dart&#39;</span>;

<span style="color:#66d9ef">void</span> main() <span style="color:#f92672">=&gt;</span> runApp(MyApp());

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyApp</span> <span style="color:#66d9ef">extends</span> StatelessWidget {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> MaterialApp(
      title: <span style="color:#e6db74">&#39;Fancy Dialog Example&#39;</span>,
      theme: ThemeData.dark(),
      initialRoute: <span style="color:#e6db74">&#39;/&#39;</span>,
      onGenerateRoute: RouteGenerator.generateRoute,
    );
  }
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">HomePage</span> <span style="color:#66d9ef">extends</span> StatefulWidget {
  <span style="color:#66d9ef">const</span> HomePage({
    Key<span style="color:#f92672">?</span> key,
  }) <span style="color:#f92672">:</span> <span style="color:#66d9ef">super</span>(key: key);

  <span style="color:#960050;background-color:#1e0010">@</span>override
  _HomePageState createState() <span style="color:#f92672">=&gt;</span> _HomePageState();
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_HomePageState</span> <span style="color:#66d9ef">extends</span> State<span style="color:#f92672">&lt;</span>HomePage<span style="color:#f92672">&gt;</span> {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Scaffold(
        appBar: AppBar(
          title: Text(<span style="color:#e6db74">&#39;Awesome Dialog Example&#39;</span>),
        ),
        body: Center(
            child: Container(
          padding: EdgeInsets.all(<span style="color:#ae81ff">16</span>),
          child: SingleChildScrollView(
            child: Column(
              children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;Info Dialog fixed width and sqare buttons&#39;</span>,
                  pressEvent: () {
                    AwesomeDialog(
                      context: context,
                      borderSide: BorderSide(color: Colors.green, width: <span style="color:#ae81ff">2</span>),
                      width: <span style="color:#ae81ff">280</span>,
                      buttonsBorderRadius: BorderRadius.all(Radius.circular(<span style="color:#ae81ff">2</span>)),
                      headerAnimationLoop: <span style="color:#66d9ef">false</span>,
                      animType: AnimType.BOTTOMSLIDE,
                      title: <span style="color:#e6db74">&#39;INFO&#39;</span>,
                      desc: <span style="color:#e6db74">&#39;Dialog description here...&#39;</span>,
                      showCloseIcon: <span style="color:#66d9ef">true</span>,
                      btnCancelOnPress: () {},
                      btnOkOnPress: () {},
                    )..show();
                  },
                ),
                SizedBox(
                  height: <span style="color:#ae81ff">16</span>,
                ),
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;Question Dialog With Custom BTN Style&#39;</span>,
                  pressEvent: () {
                    AwesomeDialog(
                      context: context,
                      dialogType: DialogType.QUESTION,
                      headerAnimationLoop: <span style="color:#66d9ef">false</span>,
                      animType: AnimType.BOTTOMSLIDE,
                      title: <span style="color:#e6db74">&#39;Question&#39;</span>,
                      desc: <span style="color:#e6db74">&#39;Dialog description here...&#39;</span>,
                      buttonsTextStyle: TextStyle(color: Colors.black),
                      showCloseIcon: <span style="color:#66d9ef">true</span>,
                      btnCancelOnPress: () {},
                      btnOkOnPress: () {},
                    )..show();
                  },
                ),
                SizedBox(
                  height: <span style="color:#ae81ff">16</span>,
                ),
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;Info Dialog Without buttons&#39;</span>,
                  pressEvent: () {
                    AwesomeDialog(
                      context: context,
                      headerAnimationLoop: <span style="color:#66d9ef">true</span>,
                      animType: AnimType.BOTTOMSLIDE,
                      title: <span style="color:#e6db74">&#39;INFO&#39;</span>,
                      desc:
                          <span style="color:#e6db74">&#39;Lorem ipsum dolor sit amet consectetur adipiscing elit eget ornare tempus, vestibulum sagittis rhoncus felis hendrerit lectus ultricies duis vel, id morbi cum ultrices tellus metus dis ut donec. Ut sagittis viverra venenatis eget euismod faucibus odio ligula phasellus,&#39;</span>,
                    )..show();
                  },
                ),
                SizedBox(
                  height: <span style="color:#ae81ff">16</span>,
                ),
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;Warning Dialog&#39;</span>,
                  color: Colors.orange,
                  pressEvent: () {
                    AwesomeDialog(
                        context: context,
                        dialogType: DialogType.WARNING,
                        headerAnimationLoop: <span style="color:#66d9ef">false</span>,
                        animType: AnimType.TOPSLIDE,
                        showCloseIcon: <span style="color:#66d9ef">true</span>,
                        closeIcon: Icon(Icons.close_fullscreen_outlined),
                        title: <span style="color:#e6db74">&#39;Warning&#39;</span>,
                        desc:
                            <span style="color:#e6db74">&#39;Dialog description here..................................................&#39;</span>,
                        btnCancelOnPress: () {},
                        btnOkOnPress: () {})
                      ..show();
                  },
                ),
                SizedBox(
                  height: <span style="color:#ae81ff">16</span>,
                ),
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;Error Dialog&#39;</span>,
                  color: Colors.red,
                  pressEvent: () {
                    AwesomeDialog(
                        context: context,
                        dialogType: DialogType.ERROR,
                        animType: AnimType.RIGHSLIDE,
                        headerAnimationLoop: <span style="color:#66d9ef">false</span>,
                        title: <span style="color:#e6db74">&#39;Error&#39;</span>,
                        desc:
                            <span style="color:#e6db74">&#39;Dialog description here..................................................&#39;</span>,
                        btnOkOnPress: () {},
                        btnOkIcon: Icons.cancel,
                        btnOkColor: Colors.red)
                      ..show();
                  },
                ),
                SizedBox(
                  height: <span style="color:#ae81ff">16</span>,
                ),
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;Succes Dialog&#39;</span>,
                  color: Colors.green,
                  pressEvent: () {
                    AwesomeDialog(
                        context: context,
                        animType: AnimType.LEFTSLIDE,
                        headerAnimationLoop: <span style="color:#66d9ef">false</span>,
                        dialogType: DialogType.SUCCES,
                        title: <span style="color:#e6db74">&#39;Succes&#39;</span>,
                        desc:
                            <span style="color:#e6db74">&#39;Dialog description here..................................................&#39;</span>,
                        btnOkOnPress: () {
                          debugPrint(<span style="color:#e6db74">&#39;OnClcik&#39;</span>);
                        },
                        btnOkIcon: Icons.check_circle,
                        onDissmissCallback: () {
                          debugPrint(<span style="color:#e6db74">&#39;Dialog Dissmiss from callback&#39;</span>);
                        })
                      ..show();
                  },
                ),
                SizedBox(
                  height: <span style="color:#ae81ff">16</span>,
                ),
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;No Header Dialog&#39;</span>,
                  color: Colors.cyan,
                  pressEvent: () {
                    AwesomeDialog(
                      context: context,
                      headerAnimationLoop: <span style="color:#66d9ef">false</span>,
                      dialogType: DialogType.NO_HEADER,
                      title: <span style="color:#e6db74">&#39;No Header&#39;</span>,
                      desc:
                          <span style="color:#e6db74">&#39;Dialog description here..................................................&#39;</span>,
                      btnOkOnPress: () {
                        debugPrint(<span style="color:#e6db74">&#39;OnClcik&#39;</span>);
                      },
                      btnOkIcon: Icons.check_circle,
                    )..show();
                  },
                ),
                SizedBox(
                  height: <span style="color:#ae81ff">16</span>,
                ),
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;Custom Body Dialog&#39;</span>,
                  color: Colors.blueGrey,
                  pressEvent: () {
                    AwesomeDialog(
                      context: context,
                      animType: AnimType.SCALE,
                      dialogType: DialogType.INFO,
                      body: Center(
                        child: Text(
                          <span style="color:#e6db74">&#39;If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.&#39;</span>,
                          style: TextStyle(fontStyle: FontStyle.italic),
                        ),
                      ),
                      title: <span style="color:#e6db74">&#39;This is Ignored&#39;</span>,
                      desc: <span style="color:#e6db74">&#39;This is also Ignored&#39;</span>,
                    )..show();
                  },
                ),
                SizedBox(
                  height: <span style="color:#ae81ff">16</span>,
                ),
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;Auto Hide Dialog&#39;</span>,
                  color: Colors.purple,
                  pressEvent: () {
                    AwesomeDialog(
                      context: context,
                      dialogType: DialogType.INFO,
                      animType: AnimType.SCALE,
                      title: <span style="color:#e6db74">&#39;Auto Hide Dialog&#39;</span>,
                      desc: <span style="color:#e6db74">&#39;AutoHide after 2 seconds&#39;</span>,
                      autoHide: Duration(seconds: <span style="color:#ae81ff">2</span>),
                    )..show();
                  },
                ),
                SizedBox(
                  height: <span style="color:#ae81ff">16</span>,
                ),
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;Testing Dialog&#39;</span>,
                  color: Colors.orange,
                  pressEvent: () {
                    AwesomeDialog(
                      context: context,
                      keyboardAware: <span style="color:#66d9ef">true</span>,
                      dismissOnBackKeyPress: <span style="color:#66d9ef">false</span>,
                      dialogType: DialogType.WARNING,
                      animType: AnimType.BOTTOMSLIDE,
                      btnCancelText: <span style="color:#e6db74">&#34;Cancel Order&#34;</span>,
                      btnOkText: <span style="color:#e6db74">&#34;Yes, I will pay&#34;</span>,
                      title: <span style="color:#e6db74">&#39;Continue to pay?&#39;</span>,
                      padding: <span style="color:#66d9ef">const</span> EdgeInsets.all(<span style="color:#ae81ff">16.0</span>),
                      desc:
                          <span style="color:#e6db74">&#39;Please confirm that you will pay 3000 INR within 30 mins. Creating orders without paying will create penalty charges, and your account may be disabled.&#39;</span>,
                      btnCancelOnPress: () {},
                      btnOkOnPress: () {},
                    ).show();
                  },
                ),
                SizedBox(
                  height: <span style="color:#ae81ff">16</span>,
                ),
                AnimatedButton(
                  text: <span style="color:#e6db74">&#39;Body with Input&#39;</span>,
                  color: Colors.blueGrey,
                  pressEvent: () {
                    late AwesomeDialog dialog;
                    dialog <span style="color:#f92672">=</span> AwesomeDialog(
                      context: context,
                      animType: AnimType.SCALE,
                      dialogType: DialogType.INFO,
                      keyboardAware: <span style="color:#66d9ef">true</span>,
                      body: Padding(
                        padding: <span style="color:#66d9ef">const</span> EdgeInsets.all(<span style="color:#ae81ff">8.0</span>),
                        child: Column(
                          children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
                            Text(
                              <span style="color:#e6db74">&#39;Form Data&#39;</span>,
                              style: Theme.of(context).textTheme.headline6,
                            ),
                            SizedBox(
                              height: <span style="color:#ae81ff">10</span>,
                            ),
                            Material(
                              elevation: <span style="color:#ae81ff">0</span>,
                              color: Colors.blueGrey.withAlpha(<span style="color:#ae81ff">40</span>),
                              child: TextFormField(
                                autofocus: <span style="color:#66d9ef">true</span>,
                                minLines: <span style="color:#ae81ff">1</span>,
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  labelText: <span style="color:#e6db74">&#39;Title&#39;</span>,
                                  prefixIcon: Icon(Icons.text_fields),
                                ),
                              ),
                            ),
                            SizedBox(
                              height: <span style="color:#ae81ff">10</span>,
                            ),
                            Material(
                              elevation: <span style="color:#ae81ff">0</span>,
                              color: Colors.blueGrey.withAlpha(<span style="color:#ae81ff">40</span>),
                              child: TextFormField(
                                autofocus: <span style="color:#66d9ef">true</span>,
                                keyboardType: TextInputType.multiline,
                                maxLengthEnforced: <span style="color:#66d9ef">true</span>,
                                minLines: <span style="color:#ae81ff">2</span>,
                                maxLines: <span style="color:#66d9ef">null</span>,
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  labelText: <span style="color:#e6db74">&#39;Description&#39;</span>,
                                  prefixIcon: Icon(Icons.text_fields),
                                ),
                              ),
                            ),
                            SizedBox(
                              height: <span style="color:#ae81ff">10</span>,
                            ),
                            AnimatedButton(
                                text: <span style="color:#e6db74">&#39;Close&#39;</span>,
                                pressEvent: () {
                                  dialog.dissmiss();
                                })
                          ],
                        ),
                      ),
                    )..show();
                  },
                ),
              ],
            ),
          ),
        )));
  }
}
</code></pre></div><p>您可以根据自己的需要进行修改和试验</p>
        </div>

        
<div class="post-archive">
    <ul class="post-copyright">
        <li><strong>原文作者：</strong><a rel="author" href="https://luckly.work/">luckly</a></li>
        <li style="word-break:break-all"><strong>原文链接：</strong><a href="https://luckly.work/post/Flutter%E6%8F%92%E4%BB%B6awesome_dialog/">https://luckly.work/post/Flutter%E6%8F%92%E4%BB%B6awesome_dialog/</a></li>
        <li><strong>版权声明：</strong>本作品采用<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议</a>进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。</li>
    </ul>
</div>
<br/>



        

<div class="post-archive">
    <h2>See Also</h2>
    <ul class="listing">
        
        <li><a href="/post/Flutter%E6%8F%92%E4%BB%B6%E5%AD%A6%E4%B9%A0%E7%9B%AE%E5%BD%95/">《Flutter插件学习目录》</a></li>
        
        <li><a href="/post/%E5%9C%A8Flutter%E4%B8%AD%E7%9A%84%E5%BC%80%E5%8F%91%E5%B0%8F%E6%8A%80%E5%B7%A71/">《在Flutter中的开发小技巧1》</a></li>
        
        <li><a href="/post/%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E5%90%91%E4%B8%8A%E4%B8%80%E7%BA%A7%E8%BF%94%E5%9B%9E%E6%95%B0%E6%8D%AE03/">《Flutter路由传参向上一级返回数据03》</a></li>
        
        <li><a href="/post/Flutter%E8%8E%B7%E5%8F%96%E9%80%9A%E8%AE%AF%E5%BD%95%E5%A5%BD%E5%8F%8B/">《Flutter获取通讯录好友02》</a></li>
        
        <li><a href="/post/flutter%E4%B8%8E%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/">《Flutter与原生通讯01》</a></li>
        
    </ul>
</div>


        <div class="post-meta meta-tags">
            
            <ul class="clearfix">
                
                <li><a href='/tags/flutter'>flutter</a></li>
                
                <li><a href='/tags/%E6%8F%92%E4%BB%B6'>插件</a></li>
                
            </ul>
            
        </div>
    </article>
    
    

    
    
    <div class="post bg-white">
      <script src="https://utteranc.es/client.js"
            repo= "https://github.com/ITmxs/repo"
            issue-term="pathname"
            theme="github-light"
            crossorigin="anonymous"
            async>
      </script>
    </div>
    
</div>

                    <footer id="footer">
    <div>
        &copy; 2021 <a href="https://luckly.work/">早起的年轻人 By luckly</a>
        
        | <a rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">粤ICP备2021号-1</a>
        
    </div>
    <br />
    <div>
        <div class="github-badge">
            <a href="https://juejin.cn/user/3843548384077192" target="_black" rel="nofollow"><span class="badge-subject">Powered by</span><span class="badge-value bg-blue">掘金</span></a>
        </div>
        <div class="github-badge">
            <a href="https://space.bilibili.com/480883651" target="_black"><span class="badge-subject">Design by</span><span class="badge-value bg-brightgreen">早起的年轻人</span></a>
        </div>
        <div class="github-badge">
            <a href="https://cloud.tencent.com/developer/user/6702670" target="_black"><span class="badge-subject">Theme</span><span class="badge-value bg-yellowgreen">云社区</span></a>
        </div>
    </div>
</footer>


    
    <script type="text/javascript">
        window.MathJax = {
            tex2jax: {
                inlineMath: [['$', '$']],
                processEscapes: true
                }
            };
    </script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script><script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<a id="rocket" href="#top"></a>
<script type="text/javascript" src='/js/totop.js?v=0.0.0' async=""></script>



    <script type="text/javascript" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>




    <script src='/js/douban.js'></script>
    <script src="/js/copy-to-clipboard.js"></script>

                </div>

                <div id="secondary">
    <section class="widget">
        <form id="search" action='https://luckly.work/search/' method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="https://luckly.work/">
      <button type="submit" class="submit icon-search"></button>
</form>
    </section>
    
    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">
    
    <li>
        <a href="https://luckly.work/xxx/xxx.html" title="信息化和信息系统">信息化和信息系统</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/%E4%BD%BF%E7%94%A8flutter%E5%88%9B%E5%BB%BA%E6%B8%85%E5%8D%95/" title="使用flutter创建清单">使用flutter创建清单</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/%E4%BD%BF%E7%94%A8flutter%E5%88%9B%E5%BB%BA%E5%B8%A6%E6%9C%89%E5%8A%A8%E7%94%BB%E7%9A%84%E5%88%9B%E6%84%8F%E6%B8%85%E5%8D%95/" title="使用flutter创建带有动画的创意清单">使用flutter创建带有动画的创意清单</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/%E4%BD%BF%E7%94%A8flutter%E5%88%9B%E5%BB%BA%E6%90%9C%E7%B4%A2%E6%A0%8F/" title="使用flutter创建搜索栏">使用flutter创建搜索栏</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/%E4%BD%BF%E7%94%A8flutter%E5%88%9B%E5%BB%BA%E5%93%8D%E5%BA%94%E5%BC%8F%E4%B8%8B%E6%8B%89%E5%AF%BC%E8%88%AA%E6%A0%8F/" title="使用flutter创建响应式下拉导航栏">使用flutter创建响应式下拉导航栏</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/Flutter%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%B9%E5%87%BA%E5%8A%A8%E7%94%BB/" title="Flutter自定义弹出动画">Flutter自定义弹出动画</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/Flutter_WEB/" title="Flutter_WEB">Flutter_WEB</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/Flutter%E7%B3%BB%E5%88%97%E5%88%97%E8%A1%A8%E5%92%8C%E7%BD%91%E6%A0%BC/" title="Flutter系列列表和网格">Flutter系列列表和网格</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/Flutter%E8%A7%86%E8%A7%89%E9%87%8D%E5%8F%A0%E6%8C%87%E5%8D%97paddingviewpadding%E5%92%8Cviewinsets/" title="Flutter视觉重叠指南padding，viewpadding和viewinsets">Flutter视觉重叠指南padding，viewpadding和viewinsets</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/Flutter/Flutter-ListView-%E5%92%8CScrollPhysics%E8%AF%A6%E7%BB%86%E4%BB%8B%E7%BB%8D/" title="Flutter ListView 和ScrollPhysics详细介绍">Flutter ListView 和ScrollPhysics详细介绍</a>
    </li>
    
</ul>
    </section>

    
<section class="widget">
    <h3 class="widget-title" style="color:red">福利派送</h3>
    <ul class="widget-list">
        
        <li>
            <a href="https://blog.csdn.net/qq_39132095?spm=1001.2101.3001.5343" title="我的CSDN" target="_blank" style="color:red">
                
                    <img src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/flutter.png">
                
            </a>
        </li>
        
        <li>
            <a href="https://space.bilibili.com/480883651" title="我的哔哩哔哩" target="_blank" style="color:red">
                
                    <img src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/flutter.png">
                
            </a>
        </li>
        
        <li>
            <a href="https://www.zhihu.com/people/yimi-yang-guang-96-65" title="我的知乎" target="_blank" style="color:red">
                
                    <img src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/flutter.png">
                
            </a>
        </li>
        
    </ul>
</section>


    <section class="widget">
        <h3 class="widget-title"><a href='/categories/'>分类</a></h3>
<ul class="widget-list">
    
    <li><a href="https://luckly.work/categories/Go/">Go (1)</a></li>
    
    <li><a href="https://luckly.work/categories/IT/">IT (1)</a></li>
    
    <li><a href="https://luckly.work/categories/Mysql/">Mysql (1)</a></li>
    
    <li><a href="https://luckly.work/categories/Nginx/">Nginx (1)</a></li>
    
    <li><a href="https://luckly.work/categories/YouTube%E8%A7%86%E9%A2%91%E4%B8%8B%E8%BD%BD/">YouTube视频下载 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/android/">android (6)</a></li>
    
    <li><a href="https://luckly.work/categories/dart/">dart (8)</a></li>
    
    <li><a href="https://luckly.work/categories/Flutter/">Flutter (141)</a></li>
    
    <li><a href="https://luckly.work/categories/git/">git (3)</a></li>
    
    <li><a href="https://luckly.work/categories/Go/">Go (4)</a></li>
    
    <li><a href="https://luckly.work/categories/ios/">ios (1)</a></li>
    
    <li><a href="https://luckly.work/categories/linux/">linux (1)</a></li>
    
    <li><a href="https://luckly.work/categories/read/">读书笔记 (6)</a></li>
    
    <li><a href="https://luckly.work/categories/redis/">redis (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99/">个人资料 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%B9%A6%E5%8D%95/">书单 (8)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%B9%A6%E8%AF%84/">书评 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统管理师 (8)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统项目管理师 (16)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%8E%9F%E5%88%99/">原则 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/">原生通讯 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%9F%BA%E7%A1%80/">基础 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%A4%8D%E5%88%A9%E6%95%88%E5%BA%94/">复利效应 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B/">安装教程 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%B0%91%E6%9C%89%E4%BA%BA%E8%B5%B0%E7%9A%84%E8%B7%AF/">少有人走的路 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%BF%83%E8%AF%AD/">心语 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E6%8F%92%E4%BB%B6/">插件 (2)</a></li>
    
    <li><a href="https://luckly.work/categories/%E6%95%99%E5%AD%A6/">教学 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%8E%8B%E9%98%B3%E6%98%8E/">王阳明 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%94%B5%E5%AD%90%E4%B9%A6/">电子书 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%99%BB%E9%99%86%E8%A1%A8%E5%8D%95/">登陆表单 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%A8%BB%E7%9B%9B%E5%92%8C%E5%A4%AB/">稻盛和夫 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%A9%B7%E7%88%B8%E7%88%B8%E5%AF%8C%E7%88%B8%E7%88%B8/">穷爸爸富爸爸 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%B2%BE%E8%BF%9B/">精进 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%BC%96%E7%A8%8B/">编程 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B4%A2%E5%8A%A1%E8%87%AA%E7%94%B1%E4%B9%8B%E8%B7%AF/">财务自由之路 (2)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B7%91%E6%AD%A5/">跑步 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82/">路由传参 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B7%AF%E7%BA%BF/">路线 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%BD%AF%E4%BB%B6%E5%AE%9E%E6%96%BD/">软件实施 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E9%98%B3%E6%98%8E%E5%BF%83%E5%AD%A6/">阳明心学 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E9%A1%B9%E7%9B%AE/">项目 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E9%AD%85%E5%8A%9B/">魅力 (1)</a></li>
    
</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title"><a href='/tags/'>标签</a></h3>
<div class="tagcloud">
    
    <a href="https://luckly.work/tags/go/">go</a>
    
    <a href="https://luckly.work/tags/IT/">IT</a>
    
    <a href="https://luckly.work/tags/Mysql/">Mysql</a>
    
    <a href="https://luckly.work/tags/Nginx/">Nginx</a>
    
    <a href="https://luckly.work/tags/YouTube%E8%A7%86%E9%A2%91%E4%B8%8B%E8%BD%BD/">YouTube视频下载</a>
    
    <a href="https://luckly.work/tags/android/">android</a>
    
    <a href="https://luckly.work/tags/dart/">dart</a>
    
    <a href="https://luckly.work/tags/flutter/">flutter</a>
    
    <a href="https://luckly.work/tags/git/">git</a>
    
    <a href="https://luckly.work/tags/go/">go</a>
    
    <a href="https://luckly.work/tags/ios/">ios</a>
    
    <a href="https://luckly.work/tags/linux/">linux</a>
    
    <a href="https://luckly.work/tags/redis/">redis</a>
    
    <a href="https://luckly.work/tags/%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99/">个人资料</a>
    
    <a href="https://luckly.work/tags/%E4%B9%A6%E5%8D%95/">书单</a>
    
    <a href="https://luckly.work/tags/%E4%B9%A6%E8%AF%84/">书评</a>
    
    <a href="https://luckly.work/tags/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统管理师</a>
    
    <a href="https://luckly.work/tags/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统项目管理师</a>
    
    <a href="https://luckly.work/tags/%E5%85%A5%E9%97%A8/">入门</a>
    
    <a href="https://luckly.work/tags/%E5%8E%9F%E5%88%99/">原则</a>
    
    <a href="https://luckly.work/tags/%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/">原生通讯</a>
    
    <a href="https://luckly.work/tags/%E5%9F%BA%E7%A1%80/">基础</a>
    
    <a href="https://luckly.work/tags/%E5%A4%8D%E5%88%A9%E6%95%88%E5%BA%94/">复利效应</a>
    
    <a href="https://luckly.work/tags/%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B/">安装教程</a>
    
    <a href="https://luckly.work/tags/%E5%B0%91%E6%9C%89%E4%BA%BA%E8%B5%B0%E7%9A%84%E8%B7%AF/">少有人走的路</a>
    
    <a href="https://luckly.work/tags/%E5%BF%83%E8%AF%AD/">心语</a>
    
    <a href="https://luckly.work/tags/%E6%8F%92%E4%BB%B6/">插件</a>
    
    <a href="https://luckly.work/tags/%E6%95%99%E5%AD%A6/">教学</a>
    
    <a href="https://luckly.work/tags/%E7%8E%8B%E9%98%B3%E6%98%8E/">王阳明</a>
    
    <a href="https://luckly.work/tags/%E7%94%B5%E5%AD%90%E4%B9%A6/">电子书</a>
    
    <a href="https://luckly.work/tags/%E7%99%BB%E9%99%86%E8%A1%A8%E5%8D%95/">登陆表单</a>
    
    <a href="https://luckly.work/tags/%E7%A8%BB%E7%9B%9B%E5%92%8C%E5%A4%AB/">稻盛和夫</a>
    
    <a href="https://luckly.work/tags/%E7%A9%B7%E7%88%B8%E7%88%B8%E5%AF%8C%E7%88%B8%E7%88%B8/">穷爸爸富爸爸</a>
    
    <a href="https://luckly.work/tags/%E7%B2%BE%E8%BF%9B/">精进</a>
    
    <a href="https://luckly.work/tags/%E7%BC%96%E7%A8%8B/">编程</a>
    
    <a href="https://luckly.work/tags/%E8%AF%97/">诗</a>
    
    <a href="https://luckly.work/tags/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书笔记</a>
    
    <a href="https://luckly.work/tags/%E8%B4%A2%E5%8A%A1%E8%87%AA%E7%94%B1%E4%B9%8B%E8%B7%AF/">财务自由之路</a>
    
    <a href="https://luckly.work/tags/%E8%B7%91%E6%AD%A5/">跑步</a>
    
    <a href="https://luckly.work/tags/%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82/">路由传参</a>
    
    <a href="https://luckly.work/tags/%E8%B7%AF%E7%BA%BF/">路线</a>
    
    <a href="https://luckly.work/tags/%E8%BD%AF%E4%BB%B6%E5%AE%9E%E6%96%BD/">软件实施</a>
    
    <a href="https://luckly.work/tags/%E9%80%9A%E8%AE%AF%E5%BD%95/">通讯录</a>
    
    <a href="https://luckly.work/tags/%E9%98%B3%E6%98%8E%E5%BF%83%E5%AD%A6/">阳明心学</a>
    
    <a href="https://luckly.work/tags/%E9%A1%B9%E7%9B%AE/">项目</a>
    
    <a href="https://luckly.work/tags/%E9%AD%85%E5%8A%9B/">魅力</a>
    
</div>
    </section>

    
<section class="widget">
    <h3 class="widget-title">友情链接</h3>
    <ul class="widget-list">
        
        <li>
            <a target="_blank" href="https://www.liwenzhou.com/" title="李文周">李文周的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="http://www.xbzweb.com/" title="小包子的博客">小包子的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="https://www.flysnow.org/" title="飞雪无情的博客">飞雪无情的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="http://yuedu.baidu.com/ebook/14a722970740be1e640e9a3e" title="Android Gradle权威指南">Android Gradle权威指南</a>
        </li>
        
        <li>
            <a target="_blank" href="https://gesdh.cn/" title="小格子">格子导航</a>
        </li>
        
        <li>
            <a target="_blank" href="https://itachi.xyz/" title="阿林">itachi&#39;s Blog</a>
        </li>
        
    </ul>
</section>


    <section class="widget">
        <h3 class="widget-title">其它</h3>
        <ul class="widget-list">
            <li><a href="https://luckly.work/index.xml">文章 RSS</a></li>
        </ul>
    </section>
</div>
            </div>
        </div>
    </div>
</body>

</html>